

<form nz-form [formGroup]="dynaactionform" class="container">
  <div class="query-rule-builder">
    <div class="query-rule-builder-head">
      <div class="query-rule-builder-operator">
          <nz-radio-group formControlName="operator">
            <label nz-radio-button [nzValue]="'AND'">
              <span>并且</span>
            </label>
            <label nz-radio-button [nzValue]="'OR'">
              <span>或者</span>
            </label>
          </nz-radio-group>
      </div>
      <div class="query-rule-builder-buttons">
        <button nz-button [nzType]="'primary'" (click)="addQueryRule()" type="button">
          <i class="anticon anticon-plus"></i>
          <span>添加条件</span>
        </button>
      </div>
    </div>
    <div class="query-rule-builder-body" formArrayName="rules">
      <div class="query-rule-container" *ngFor="let formGroup of getControls(); let formGroupName=index" [formGroupName]="formGroupName">
        <div class="query-rule-field">
          <nz-select nzPlaceHolder="请选择字段" formControlName="field">
            <nz-option *ngFor="let option of fields" [nzLabel]="option.alias" [nzValue]="option.name"></nz-option>
          </nz-select>
        </div>
        <div class="query-rule-operator" *ngIf="formGroup.controls['operator'].enabled">
          <nz-select nzPlaceHolder="运算符" formControlName="operator">
            <nz-option *ngFor="let option of formatOperators(formGroupName)" [nzLabel]="option.lable" [nzValue]="option.value"></nz-option>
          </nz-select>
        </div>
        <div class="query-rule-value" *ngIf="formGroup.controls['value'].enabled" [ngSwitch]="getFieldType(formGroup.controls['field'].value)">
          <nz-input-number nzPlaceHolder="请输入值" formControlName="value" [nzStep]="1" *ngSwitchCase="'Number'" style="width: 100%;"></nz-input-number>
          <nz-datepicker nzPlaceHolder="请选择时间" formControlName="value" nzShowTime [nzFormat]="'YYYY-MM-DD HH:mm:ss'" *ngSwitchCase="'DateTime'"></nz-datepicker>
          <nz-input nzPlaceHolder="请输入值" formControlName="value" *ngSwitchDefault></nz-input>
        </div>
        <div class="query-rule-remove">
          <button nz-button [nzType]="'danger'" [nzShape]="'circle'" (click)="removeQueryRule(formGroupName)" type="button">
            <i class="anticon anticon-close"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>

<div class="customize-footer">
  <button nz-button [nzType]="'primary'" 
  [nzSize]="'large'" 
  [nzLoading]="loading"  
  [disabled]="!dynaactionform.valid" 
  (click)="handleConform()">确 定</button>
  <button nz-button [nzType]="'default'" 
  [nzSize]="'large'" 
  (click)="handleCancel()">取 消</button>
</div>